import React, { memo, useEffect, useState } from 'react'
import { Table, Space, Popconfirm, Drawer, Button, Form, Input, Select } from 'antd'
import { add, del, details, getList, upDate } from '../api/table'
const Home2 = memo(() => {
    const [open, setOpen] = useState(false);
    const [dataSource, setDataSource] = useState([])
    const [title, setTitle] = useState('新增')
    const [id, setId] = useState('')
    const getDataSource = async () => {
        let res = await getList()
        setDataSource(res)
    }
    useEffect(() => {
        getDataSource()
    }, [])

    const columns = [
        {
            title: '姓名',
            dataIndex: 'name',
            key: 'name',
        },
        {
            title: '年龄',
            dataIndex: 'age',
            key: 'age',
        },
        {
            title: '性别',
            dataIndex: 'sex',
            key: 'sex',
        },
        {
            title: '分数',
            dataIndex: 'score',
            key: 'score',
        },
        {
            title: '操作',
            dataIndex: 'action',
            key: 'action',
            render: (_, record) => (
                <Space size="middle">
                    <a onClick={() => onEdit(record.id)}>编辑 </a>
                    <Popconfirm
                        title="删除"
                        description="你确定要删除吗?"
                        okText="确定"
                        cancelText="取消"
                        placement="bottom"
                        onConfirm={() => onDel(record.id)}
                    >
                        <a>删除</a>
                    </Popconfirm>
                </Space >
            ),
        },
    ];

    const [dataSourceForm] = Form.useForm()

    const onDel = async (id) => {
        await del(id)
        getDataSource()
    }
    const onEdit = async (id) => {
        setTitle('编辑')
        setOpen(true);
        let res = await details(id)
        dataSourceForm.setFieldsValue(res)
        setId(id)
    };
    const onAdd = () => {
        dataSourceForm.resetFields()
        setTitle('新增')
        setOpen(true);
        setId('')
    };
    const onClose = () => {
        setOpen(false);
    };
    const onFinsh = async (value) => {
        if (id === '') {
            await add({ ...value, key: new Date().getTime() + '' })
        } else {
            await upDate(id, { ...value, key: id })
        }
        setOpen(false)
        dataSourceForm.resetFields()
        getDataSource()
    }
    return (
        <div>
            <Button onClick={() => { onAdd() }}>新增</Button>
            <Table
                dataSource={dataSource}
                columns={columns}
                pagination={{
                    position: ['none', "none"]
                }}
            />
            <Drawer title={title} placement="right" onClose={onClose} open={open}>
                <Form
                    form={dataSourceForm}
                    onFinish={onFinsh}
                    name='dataSourceForm'
                >
                    <Form.Item label='姓名' name='name' rules={[
                        {
                            required: true,
                        },
                    ]}>
                        <Input></Input>
                    </Form.Item>
                    <Form.Item label='年龄' name='age' rules={[
                        {
                            required: true,
                        },
                    ]}>
                        <Input></Input>
                    </Form.Item>
                    <Form.Item label='性别' name='sex' rules={[
                        {
                            required: true,
                        },
                    ]}>
                        <Select
                            style={{ width: 277 }}
                            options={[
                                { value: '男', label: '男' },
                                { value: '女', label: '女' },
                            ]}
                        />
                    </Form.Item>
                    <Form.Item label='分数' name='score' rules={[
                        {
                            required: true,
                        },
                    ]}>
                        <Input></Input>
                    </Form.Item>
                    <Form.Item>
                        <Button type='primary' htmlType='submit'>保存</Button>
                        <Button onClick={() => {
                            setOpen(false)
                            dataSourceForm.resetFields()
                        }}>取消</Button>
                    </Form.Item>
                </Form>
            </Drawer>
        </div >
    )
})

export default Home2